<template>
  <div id="menu_table">
  <div>
    <el-table :data="menuList" style="width: 100%; margin-bottom: 10px" height="800" row-key="menuId" border>
      <el-table-column fixed type="index" width="80" label="序号" />
      <el-table-column fixed  prop="menuName" label="菜单名称"/>
      <el-table-column prop="orderNum" label="显示顺序"/>
      <el-table-column prop="url" label="跳转地址"/>
      <el-table-column prop="visible" label="可见">
        <template #default="scope" >
          <el-tag class="ml-2"  v-if="scope.row.visible==='0'">显示</el-tag>
          <el-tag class="ml-2" type="danger"  v-if="scope.row.visible==='1'">隐藏</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="menuType" label="类型">
        <template #default="scope" >
          <el-tag class="ml-2"  v-if="scope.row.menuType==='M'">目录</el-tag>
          <el-tag class="ml-2" type="success" v-if="scope.row.menuType==='C'">菜单</el-tag>
          <el-tag class="ml-2" type="info" v-if="scope.row.menuType==='F'">按钮</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="300">
        <template #default="scope" >
          <el-button size="small" type="primary" @click="updateMenu(scope.row)">编辑</el-button>
          <el-button size="small" type="warning" @click="addChildMenu(scope.row)">新增子菜单</el-button>
          <el-button size="small" type="danger"  @click="deleteMenu(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  </div>
  <div id="updataMenuDialog" v-if="updataMenuDialogVisible">
    <el-dialog title="编辑菜单" v-model="updataMenuDialogVisible" width="880">
      <el-form v-model="upDatamenuInfo">
        <el-form-item  label="上级菜单">
          <div style="width: 100%"  v-if="upDatamenuInfo.parentName != null ">
            <el-input v-model="upDatamenuInfo.parentName" disabled></el-input>
          </div>
          <div style="width: 100%"  v-if="upDatamenuInfo.parentName == null ">
            <el-input value="无" disabled></el-input>
          </div>
        </el-form-item>
        <el-form-item label="菜单类型" >
          <el-radio-group v-model="upDatamenuInfo.menuType" class="ml-4">
            <el-radio label="M">目录</el-radio>
            <el-radio label="C">菜单</el-radio>
            <el-radio label="F">按钮</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="菜单名称" >
          <el-input v-model="upDatamenuInfo.menuName"></el-input>
        </el-form-item>
        <el-form-item label="请求地址" >
          <el-input v-model="upDatamenuInfo.url"></el-input>
        </el-form-item>
        <el-form-item label="打开方式" >
          <el-radio-group v-model="upDatamenuInfo.target" class="ml-4">
            <el-radio label="menuItem">页签</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="显示顺序" >
          <el-input v-model="upDatamenuInfo.orderNum"></el-input>
        </el-form-item>
        <el-form-item label="菜单状态" >
          <el-radio-group v-model="upDatamenuInfo.visible" class="ml-4">
            <el-radio label="0">显示</el-radio>
            <el-radio label="1">隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div style="padding: 1rem">
        <el-button size="large" type="danger" @click="updataMenuDialogVisible=false">取消</el-button>
        <el-button size="large" type="primary" @click="updataMenuSubmit">提交</el-button>
      </div>
    </el-dialog>
  </div>
  <div id="adddataMenuDialog" v-if="adddataMenuDialogVisible">
    <el-dialog title="添加菜单" v-model="adddataMenuDialogVisible" width="880">
      <el-form v-model="addmenuInfo">
        <el-form-item  label="上级菜单">
          <div style="width: 100%"  v-if="addmenuInfo.parentName != null ">
            <el-input v-model="addmenuInfo.parentName" disabled></el-input>
          </div>
          <div style="width: 100%"  v-if="addmenuInfo.parentName == null ">
            <el-input value="无" disabled></el-input>
          </div>
        </el-form-item>
        <el-form-item label="菜单类型" >
          <el-radio-group v-model="addmenuInfo.menuType" class="ml-4">
            <el-radio label="M">目录</el-radio>
            <el-radio label="C">菜单</el-radio>
            <el-radio label="F">按钮</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="菜单名称" >
          <el-input v-model="addmenuInfo.menuName"></el-input>
        </el-form-item>
        <el-form-item label="请求地址" >
          <el-input v-model="addmenuInfo.url"></el-input>
        </el-form-item>
        <el-form-item label="打开方式" >
          <el-radio-group v-model="addmenuInfo.target" class="ml-4">
            <el-radio label="menuItem">页签</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="显示顺序" >
          <el-input v-model="addmenuInfo.orderNum"></el-input>
        </el-form-item>
        <el-form-item label="菜单状态" >
          <el-radio-group v-model="addmenuInfo.visible" class="ml-4">
            <el-radio label="0">显示</el-radio>
            <el-radio label="1">隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div style="padding: 1rem">
        <el-button size="large" type="danger" @click="adddataMenuDialogVisible=false">取消</el-button>
        <el-button size="large" type="primary" @click="addMenuSubmit">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref,reactive} from "vue";
import {ElMessage, ElMessageBox} from 'element-plus'
import {getMenuListByUser, selectAllMenu} from "../../api/home";
import router from "../../router";
import {addMenu, deleteMenuById, deleteUser, selectMenuByMenuId, selectMenuEdit} from "../../api/system";
import {useUsersStore} from "../../store/userInfo.ts";
const store = useUsersStore();
const { name, role, token } = store;
const menuList = ref([]);
let upDatamenuInfo = ref({

});
let addmenuInfo = ref({});
let updateUrl = ref('')
let addUrl = ref('')
const updataMenuDialogVisible = ref(false);
const adddataMenuDialogVisible = ref(false);
onMounted( async () =>{
  await query();
})

window.addEventListener('message',async function (e) {
  if (e.data === "ctrl") {
    updataMenuDialogVisible.value=false;
    await query();
  }else if (e.data === "ctrlAdd"){
    adddataMenuDialogVisible.value=false;
    await query();
  }
  else {
    if (e.data.messagetype ===1){
    }else if (e.data.messagetype ===2){

    }
  }
},false);
const query = async () =>{
 let res= await selectAllMenu();
 if (res.code ==200){
   menuList.value= res.data;
 }else if (res.code ==8333){
   ElMessage.error(res.msg)
   store.$reset();
   await router.push("/")
 }
}
const deleteMenu = async (row) => {
  ElMessageBox.confirm('确认删除该菜单?')
      .then(async () => {
        let res = await deleteMenuById({menuId: row.menuId});
        if (res.code ==200){
          ElMessage.success(res.msg)
          await query();
        }else{
          ElMessage.error(res.msg)
        }
      })
      .catch(() => {
        // catch error
      })
}
const updateMenu = async (row) => {
  let res = await selectMenuByMenuId({menuId: row.menuId});
  upDatamenuInfo.value =res.data;
  updataMenuDialogVisible.value=true;

}
const addChildMenu = async (row) => {
  addmenuInfo.value.parentId = row.menuId
  addmenuInfo.value.parentName = row.menuName
  addmenuInfo.value.visible = '0'
  addmenuInfo.value.target = 'menuItem'
  addmenuInfo.value.menuType = 'C'
  adddataMenuDialogVisible.value=true;
}
const updataMenuSubmit = async () => {
  let x = upDatamenuInfo.value;
  let res = await selectMenuEdit({
    icon:x.icon==undefined?'':x.icon,
    menuName:x.menuName==undefined?'':x.menuName,
    menuId:x.menuId==undefined?'':x.menuId,
    isRefresh:x.isRefresh==undefined?'':x.isRefresh,
    menuType:x.menuType==undefined?'':x.menuType,
    orderNum:x.orderNum==undefined?'':x.orderNum,
    parentId:x.parentId==undefined?0:x.parentId,
    perms:x.perms==undefined?"":x.perms,
    target:x.target==undefined?"":x.target,
    url:x.url==undefined?"":x.url,
    visible:x.visible==undefined?"":x.visible,
  });
  if (res.code == 200) {
    updataMenuDialogVisible.value=false;
    ElMessage.success(res.msg)
    await query();
  }else {
    ElMessage.error(res.msg)
  }
}
const addMenuSubmit =async () => {
  let x = addmenuInfo.value;
  let res = await addMenu({
    icon:x.icon==undefined?'':x.icon,
    menuName:x.menuName==undefined?'':x.menuName,
    menuId:x.menuId==undefined?'':x.menuId,
    isRefresh:x.isRefresh==undefined?'':x.isRefresh,
    menuType:x.menuType==undefined?'':x.menuType,
    orderNum:x.orderNum==undefined?'':x.orderNum,
    parentId:x.parentId==undefined?0:x.parentId,
    perms:x.perms==undefined?"":x.perms,
    target:x.target==undefined?"":x.target,
    url:x.url==undefined?"":x.url,
    visible:x.visible==undefined?"":x.visible,
  });
  if (res.code == 200) {
    adddataMenuDialogVisible.value=false;
    ElMessage.success(res.msg)
    await query();
  }else {
    ElMessage.error(res.msg)
  }
}

</script>
<style scoped>
#menu_table{
  //height:90vh;
  //overflow-y: scroll;
}
</style>
